<template>
	<view class="content">
		<navTop :title="navtop.title" :tipsShow="false" :color="navtop.color" :isBack="true" ></navTop>
		<view class="content-top">
			<!-- <view class="content-top__title">
				<view class="content-top__item" :class="{'active' : active == i }" v-for="(v, i) in titleList" @click="changeModel(v, i)">
					{{v.name}}
				</view>
			</view> -->
		</view>
		<view class="view-top">
			<image :src="banner" mode="" class="view-top__img"></image>
			<text class="view-top__title-tips">GuideLine</text>
			<text class="view-top__title">Shenzhen Dog License Management Guide</text>
		</view>
		<view class="view-content" id="arc-content">
			<scroll-view class="scroller" :scroll-into-view="toView" scroll-y="true" scroll-with-animation="true">
				<view class="view-content__item" id="entry">
					<view class="view-content__box">
						<view class="line-title">
							<text class="line-title__left">
								Application
								Requirement
							</text>
							<image :src="'/static/v-l.png'" mode="" class="line-title__right"></image>
						</view>
						<view class="view-content__btns">
							<view class="view-content__b">
								<view class="box">
									
								</view>
							</view>
							<view class="view-content__r">
								<view class="box">
									
								</view>
							</view>
						</view>
						<view class="line">
							<view class="line-img">
								<view class="line-text__box">01</view>
								<image :src="'/static/v-n-1.png'" mode="" class="line-img__box"></image>
							</view>
							<view class="line-text">
								Having a legal identity certificate or a legally established unit
							</view>
						</view>
						<view class="border-bottom__line">
							
						</view>
						<view class="line">
							<view class="line-text">
								Have full capacity for civil conduct
							</view>
							<view class="line-img">
								<view class="line-text__box">02</view>
								<image :src="'/static/v-n-2.png'" mode="" class="line-img__box"></image>
							</view>
						</view>
						<view class="border-bottom__line">
							
						</view>
						<view class="line">
							<view class="line-img">
								<view class="line-text__box">03</view>
								<image :src="'/static/v-n-3.png'" mode="" class="line-img__box"></image>
							</view>
							<view class="line-text">
								Having a fixed residence (refers to owning a property or renting it for more than six months)
							</view>
						</view>
						<view class="border-bottom__line">
							
						</view>
						<view class="line">
							<view class="line-text">
								Single family living (non-co-owned property or partnership tenancy)
							</view>
							<view class="line-img">
								<view class="line-text__box">04</view>
								<image :src="'/static/v-n-4.png'" mode="" class="line-img__box"></image>
							</view>
						</view>
						<view class="border-bottom__line">
							
						</view>
						<view class="line">
							<view class="line-img">
								<view class="line-text__box">05</view>
								<image :src="'/static/v-n-5.png'" mode="" class="line-img__box"></image>
							</view>
							<view class="line-text">
								There are special places and safety protection facilities (unit dog)
							</view>
						</view>
					</view>
				</view>
				<view class="view-content__item" id="entry">
					<view class="view-content__box">
						<view class="line-title">
							<text class="line-title__left">
								Apply for 
								Preparing
							</text>
							<image :src="'/static/v-l.png'" mode="" class="line-title__right"></image>
						</view>
						<view class="view-content__btns">
							<view class="view-content__b">
								<view class="box">
									
								</view>
							</view>
							<view class="view-content__r">
								<view class="box">
									
								</view>
							</view>
						</view>
						<view class="line">
							<view class="line-img">
								<view class="line-text__box">01</view>
								<image :src="'/static/v-n-6.png'" mode="" class="line-img__box"></image>
							</view>
							<view class="line-text">
								Dog registration form
							</view>
						</view>
						<view class="border-bottom__line">
							
						</view>
						<view class="line">
							<view class="line-text">
								Copy of ID card or registration certificate
							</view>
							<view class="line-img">
								<view class="line-text__box">02</view>
								<image :src="'/static/v-n-7.png'" mode="" class="line-img__box"></image>
							</view>
						</view>
						<view class="border-bottom__line">
							
						</view>
						<view class="line">
							<view class="line-img">
								<view class="line-text__box">03</view>
								<image :src="'/static/v-n-3.png'" mode="" class="line-img__box"></image>
							</view>
							<view class="line-text">
								Copy of Property Ownership Letter or Leasing Contract or proof of residence for more than six months provided by the neighborhood committee
							</view>
						</view>
						<view class="border-bottom__line">
							
						</view>
						<view class="line">
							<view class="line-text">
								A copy of the company's introduction letter and the ID card of the handler (the company's dog)
							</view>
							<view class="line-img">
								<view class="line-text__box">04</view>
								<image :src="'/static/v-n-8.png'" mode="" class="line-img__box"></image>
							</view>
						</view>
						<view class="border-bottom__line">
							
						</view>
						<view class="line">
							<view class="line-img">
								<view class="line-text__box">05</view>
								<image :src="'/static/v-n-9.png'" mode="" class="line-img__box"></image>
							</view>
							<view class="line-text">
								Take 3 pictures of a one-inch dog's head and 1 picture of a three-inch dog's whole body. The picture should be clear enough to show the dog's eyes
							</view>
						</view>
						<view class="border-bottom__line">
							
						</view>
						<view class="line">
							<view class="line-text">
								Blind people keep guide dogs, Mutilated people keep help dogs should  provide certificate of disability
							</view>
							<view class="line-img">
								<view class="line-text__box">06</view>
								<image :src="'/static/v-n-10.png'" mode="" class="line-img__box"></image>
							</view>
						</view>
						<view class="border-bottom__line">
							
						</view>
						<view class="line">
							<view class="line-img">
								<view class="line-text__box">07</view>
								<image :src="'/static/v-n-11.png'" mode="" class="line-img__box"></image>
							</view>
							<view class="line-text">
								Where a dog is reared for sterilization, the sterilization certificate provided by the institution performing the sterilization operation shall be submitted
							</view>
						</view>
					</view>
				</view>
				<view class="view-content__item" id="entry">
					<view class="view-content__box">
						<view class="line-title">
							<text class="line-title__left">
								Application
								Requirement
							</text>
							<image :src="'/static/v-l.png'" mode="" class="line-title__right"></image>
						</view>
						<view class="view-content__btns">
							<view class="view-content__b">
								<view class="box">
									
								</view>
							</view>
							<view class="view-content__r">
								<view class="box">
									
								</view>
							</view>
						</view>
						<view class="bottom-box">
							<view class="bottom-box__title">
								WeChat Official Account
							</view>
							<view class="bottom-box__line">
								<view class="bottom-box__b">
									<view class="bottom-box__f">
										
									</view>
								</view>
								<view class="bottom__box-t">
									"Beautiful Shenzhen"
								</view>
							</view>
							<view class="bottom-box__line">
								<view class="bottom-box__b">
									<view class="bottom-box__f">
										
									</view>
								</view>
								<view class="bottom__box-t">
									Handy service for the public
								</view>
							</view>
							<view class="bottom-box__line">
								<view class="bottom-box__b">
									<view class="bottom-box__f">
										
									</view>
								</view>
								<view class="bottom__box-t">
									Raises the dog service
								</view>
							</view>
						</view>
					</view>
				</view>
			
			</scroll-view>
		</view>
	</view>
</template>
<script>
import navTop from '@/components/nav-title.vue';

import banner from '@/static/visa-b.png'
import vy from '@/static/v-y.png'
import vDown from '@/static/v-down.png'
	export default {
		components: {
			navTop
		},
		data() {
			return {
				banner,
				vy,
				vDown,
				toView: '',
				active: 0,
				navtop: {
					title: ' ',
					color: '#fff'
				}
			}
		},
		onLoad() {

		},
		created() {
			this.isBarHeight999().then((statusBarHeight)=>{
				this.barHeight = statusBarHeight + 100
			})
		},
		methods: {
			gotoItem(v, i) {
				this.active = i
				this.toView = v.id;
			},
			gotoId(id) {
				uni.createSelectorQuery().select(id).boundingClientRect(data=>{//目标位置的节点：类或者id
					  uni.createSelectorQuery().select("#arc-content").boundingClientRect(res=>{//最外层盒子的节点：类或者id
							uni.pageScrollTo({
								  duration: 100,//过渡时间
								  scrollTop:res.top - data.top  ,//返回顶部的top值
							})
					  }).exec()
				}).exec();
			},
			gotoWx() {
				// uni.navigateToMiniProgram({
				// 	appId: id,
				// 	path: url,
				// 	success: res => {
				// 	  // 打开成功
				// 	  console.log("打开成功", res);
				// 	},
				// 	fail: err => {
				// 	  console.log(err);
				// 	}
				// });
			}
		}
	}
</script>

<style lang="less">
.content {
	background-color: #0078FF;
}
.scroller {
	height: 66vh;
}
.view-top {
	position: relative;
	.view-top__img {
		width: 100vw;
	}
	.view-top__title-tips {
		position: absolute;
		left: 30rpx;
		top: 240rpx;
		font-size: 32rpx;
		font-family: Helvetica-Bold, Helvetica;
		font-weight: bold;
		color: #FFFFFF;
	}
	.view-top__title {
		position: absolute;
		left: 30rpx;
		top: 276rpx;
		font-size: 56rpx;
		font-family: PingFangSC-Semibold, PingFang SC;
		font-weight: 600;
		color: #FFFFFF;
	}
	.view-top__nav{
		position: absolute;
		top: 386rpx;
		left: 30rpx;
		display: flex;
		justify-content: flex-start;
		align-items: flex-start;
		.view-top__item {
			margin-right: 40rpx;
			font-size: 32rpx;
			font-family: PingFangSC-Semibold, PingFang SC;
			font-weight: 600;
			color: #FFFFFF;
			height: 66rpx;
			position: relative;
		}
		.active::after {
			content: ' ';
			width: 48rpx;
			height: 4rpx;
			background: #FFFFFF;
			border-radius: 2px;
			position: absolute;
			bottom: 0;
			left: 50%;
			transform: translate(-50%, 0);
		}
	}
}
.view-content {
	position: relative;
	z-index: 9;
	margin-top: -28rpx;
	padding: 0 30rpx 150rpx;
	.view-content__item {
		background: #FFFFFF;
		box-shadow: 0px 4px 12px 0px rgba(55, 58, 64, 0.08);
		border-radius: 4px;
		padding: 40rpx;
		margin-bottom: 40rpx;
	}
	.view-content__title {
		position: relative;
		margin-bottom: 40rpx;
	}
	.view-title__img {
		width: 96rpx;
		height: 80rpx;
	}
	.view-tilte__text {
		font-size: 40rpx;
		font-family: PingFangSC-Semibold, PingFang SC;
		font-weight: 600;
		color: #0078FF;
		position: absolute;
		left: 0;
		bottom: -20rpx;
	}
}
.view-content__box {
	font-size: 28rpx;
	font-family: PingFangSC-Regular, PingFang SC;
	font-weight: 400;
	color: #1F1F1F;
	line-height: 44rpx;
	.line-title {
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 56rpx;
		font-family: Helvetica-Bold, Helvetica;
		font-weight: bold;
		color: #0078FF;
		margin: 40rpx 0 24rpx;
		.line-title__left {
			line-height: 64rpx;
		}
		.line-title__right {
			width: 120rpx;
			height: 120rpx;
		}
	}
	.line {
		margin: 40rpx 0;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 16rpx;
	}
}
.view-content__list {
	font-size: 28rpx;
	font-family: PingFangSC-Regular, PingFang SC;
	font-weight: 400;
	color: #1F1F1F;
	.line-title {
		font-size: 40rpx;
		font-family: Helvetica-Bold, Helvetica;
		font-weight: bold;
		color: #1F1F1F;
		margin: 40rpx 0 24rpx;
		
	}
	.view-content__line {
		// min-height: 72rpx;
		display: flex;
		justify-content: flex-start;
		align-items: flex-start;
		// background: linear-gradient(270deg, rgba(0, 120, 255, 0.05) 0%, rgba(0, 116, 255, 0.1) 100%);
		border-radius: 8rpx;
		margin-bottom: 20rpx;
		padding: 14rpx 24rpx;
	}
	.view-list__img {
		width: 40rpx;
		height: 40rpx;
		margin-right: 20rpx;
	}
	.view-list__text {
		width: 500rpx;
	}
}
.view-content__btns {
	border-top: 1px dashed #0078FF;
	position: relative;
	.view-content__b {
		position: absolute;
		left: 0;
		top: 0;
		background-color: #fff;
		width: 40rpx;
		height: 40rpx;
		.box {
			position: absolute;
			left: 0;
			top: 0;
			background-color: #0078FF;
			width: 30rpx;
			height: 30rpx;
			border-radius: 50%;
			transform: translate(-56rpx, -50%);
		}
	}
	.view-content__r {
		position: absolute;
		right: 0;
		top: 0;
		background-color: #fff;
		width: 40rpx;
		height: 40rpx;
		.box {
			position: absolute;
			right: 0;
			top: 0;
			background-color: #0078FF;
			width: 30rpx;
			height: 30rpx;
			border-radius: 50%;
			transform: translate(56rpx, -50%);
		}
	}
}
.view-btns {
	text-align: center;
	font-size: 24rpx;
	font-family: PingFangSC-Regular, PingFang SC;
	font-weight: 400;
	color: #0078FF;
	.view-goto__btn{
		display: inline-block;
		width: 610rpx;
		height: 88rpx;
		line-height: 88rpx;
		background: #0078FF;
		border-radius: 56rpx;
		margin: 40rpx 0;
		text-align: center;
	font-size: 32rpx;
		color: #FFFFFF;
	}
	.view-goto__img {
		width: 32rpx;
		height: 32rpx;
		margin-top: 8rpx;
		transform: rotate(90deg);
	}
}
.line-text {
	margin-bottom: 20rpx;
	.line-1 {
		color: rgba(31, 31, 31, 0.65);
	}
	.line-2{
		color: #1F1F1F;
	}
}

.line-img {
	position: relative;
	width: 128rpx;
	height: 128rpx;
	.line-img__box {
		width: 128rpx;
		height: 128rpx;
	}
	.line-text__box {
		position: absolute;
		left: 0;
		top: 0;
		transform: translate(-50%, 0);
		width: 48rpx;
		height: 48rpx;
		text-align: center;
		line-height: 48rpx;
		border-radius: 50%;
		background-color: #0078FF;
		color: #fff;
		font-size: 26rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
	}
}
.line-text{
	width: 436rpx;
	font-size: 26rpx;
	font-family: PingFangSC-Regular, PingFang SC;
	font-weight: 400;
	color: #1F1F1F;	
	margin: 0;
}
.border-bottom__line {
	width: 610rpx;
	margin: auto;
	border-bottom: 1px solid #F1F1F1;
}
.bottom-box {
	.bottom-box__title {
		font-size: 32rpx;
		font-family: Helvetica-Bold, Helvetica;
		font-weight: bold;
		color: #1F1F1F;
		margin: 30rpx 0;
	}
	.bottom-box__line {
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}
	.bottom-box__b {
		width: 16rpx;
		height: 16rpx;
		position: relative;
		background: #0078FF;
		border-radius: 50%;
	}
	.bottom-box__f {
		width: 8rpx;
		height: 8rpx;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		background-color: #fff;
		border-radius: 50%;
	}
	.bottom__box-t {
		width: 574rpx;
		margin-left: 20rpx;
	}
}
</style>